<template>
    <base-card>
        <el-page-header :icon="ArrowLeft" @back="onBack">
            <template #content>
                <span class="text-large font-600 mr-3">添加优惠券</span>
            </template>
        </el-page-header>
    </base-card>
    <BaseCard>
        <el-form :model="formItem" label-width="160">
            <el-form-item label="优惠券名称">
                <el-input v-model="formItem.name" show-word-limit maxlength="18" />
            </el-form-item>
            <el-form-item label="优惠券面值">
                <el-input v-model="formItem.price">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="发送方式">
                <div class="tip">
                    <el-radio-group v-model="formItem.sendWayId">
                        <el-radio v-for="item in couponSendWayData.rows" :key="item._id" :value="item._id">
                            {{ item.name }}
                        </el-radio>
                    </el-radio-group>
                    <p v-for="item in couponSendWayData.rows" :key="item._id">
                        {{ item.name }}: {{ item.intro }}
                    </p>
                </div>
            </el-form-item>
            <el-form-item label="使用门槛">
                <div class="tip">
                    <el-radio-group v-model="formItem.use_sill">
                        <el-radio v-for="item in useSillData" :key="item.value" :value="item.value">
                            {{ item.name }}
                        </el-radio>
                    </el-radio-group>
                    <template v-if="formItem.use_sill == 1">
                        <div>
                            <el-input v-model="formItem.min_price">
                                <template #suffix>
                                    <span>元</span>
                                </template>
                            </el-input>
                        </div>
                        <p>填写优惠券的最低消费金额</p>
                    </template>
                </div>
            </el-form-item>
        </el-form>
    </BaseCard>
</template>

<script setup lang="ts">
import { getCouponByIdApi, type CouponItemType } from '@/api/coupon';
import { useFindData } from '@/composables/findData';
import { ArrowLeft } from '@element-plus/icons-vue'
import {
    // onActivated, onDeactivated,
    onMounted, onUnmounted, ref
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

const formItem = ref<Partial<CouponItemType>>({});
const { couponSendWayData, findCouponSendWayAsync } = useFindData();

const useSillData: { value: number, name: string }[] = [
    { value: 0, name: '无门槛' },
    { value: 1, name: '有门槛' },
]

// onActivated(() => {
//     console.log('进入缓存组件时');
// })
// onDeactivated(() => {
//     console.log('离开缓存组件时');
// })

onUnmounted(() => {
    console.log("优惠券【新增】组件 --- 销毁");
})



onMounted(() => {
    console.log("优惠券【新增】组件 --- 挂载");
    findCouponSendWayAsync();
    getCouponById();
})

// 获取当前要修改的优惠券对象
function getCouponById() {
    if (route.params._id) {
        getCouponByIdApi({ _id: route.params._id })
            .then(res => {
                if (res.code == 200) {
                    formItem.value = res.data;
                }
            })
    }
}

const onBack = () => {
    router.back();
}
</script>

<style scoped>
.tip {
    line-height: 20px;
    font-size: 12px;
    color: #999;
}

.el-input {
    width: 410px;
}
</style>
